a
<template>
  <div class="relative">
    <Editor :api-key="aipKey" :init="config" v-model="content" v-bind="$attrs" />
    <el-button :class="uploadButtonClass" @click="openDialog()"><Icon name="cloud-arrow-up" class="mr-1" />选择附件</el-button>
    <!-- Dialog -->
    <Dialog v-model="attachVisible" width="1200px" title="选择附件" append-to-body :z-index="999999">
      <Attachment :multi="multiAttach" @close-dialog="closeDialog" v-model="attachments" />
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import Attachment from '@/views/system/systemAttachments/index.vue'
import '@/public/tinymce/tinymce.min'
import '@/public/tinymce/themes/silver/theme.min'
import '@/public/tinymce/icons/default/icons.min'
import '@/public/tinymce/models/dom/model.min'
// css
import '@/public/tinymce/skins/ui/oxide/skin.min.css'

// plugins
import '@/public/tinymce/plugins/preview/plugin.min'
import '@/public/tinymce/plugins/searchreplace/plugin.min'
import '@/public/tinymce/plugins/autolink/plugin.min'
import '@/public/tinymce/plugins/directionality/plugin.min'
import '@/public/tinymce/plugins/visualblocks/plugin.min'
import '@/public/tinymce/plugins/visualchars/plugin.min'
import '@/public/tinymce/plugins/fullscreen/plugin.min'
import '@/public/tinymce/plugins/image/plugin.min'
import '@/public/tinymce/plugins/link/plugin.min'
import '@/public/tinymce/plugins/media/plugin.min'
import '@/public/tinymce/plugins/template/plugin.min'
import '@/public/tinymce/plugins/code/plugin.min'
import '@/public/tinymce/plugins/codesample/plugin.min'
import '@/public/tinymce/plugins/table/plugin.min'
import '@/public/tinymce/plugins/charmap/plugin.min'
import '@/public/tinymce/plugins/pagebreak/plugin.min'
import '@/public/tinymce/plugins/nonbreaking/plugin.min'
import '@/public/tinymce/plugins/anchor/plugin.min'
import '@/public/tinymce/plugins/insertdatetime/plugin.min'
import '@/public/tinymce/plugins/advlist/plugin.min'
import '@/public/tinymce/plugins/lists/plugin.min'
import '@/public/tinymce/plugins/wordcount/plugin.min'
import '@/public/tinymce/plugins/autosave/plugin.min'
import '@/public/tinymce/plugins/emoticons/plugin.min'
// lang
import '@/public/tinymce/langs/zh-Hans'

import Editor from '@tinymce/tinymce-vue'
import { env, getFileExt, getFilename } from '@/support/helper'
import Http from '@/support/http'
import Message from '@/support/message'
import { ref, watch } from 'vue'
import { IMAGE_EXTENSIONS } from '@/composables/useUpload'

const attachVisible = ref<boolean>(false)
const props = defineProps({
  width: {
    type: [Number, String],
    required: false,
    default: 'auto'
  },
  height: {
    type: [Number, String],
    required: false,
    default: 'auto'
  },
  language: {
    type: String,
    default: 'zh-Hans'
  },

  placeholder: {
    type: String,
    default: '在这里输入内容'
  },

  plugins: {
    type: String,
    default: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code ' + 'codesample table charmap'
  },
  toolbar: {
    type: Array<string>,
    default: [
      'undo redo restoredraft cut copy paste pastetext forecolor backcolor bold italic underline strikethrough link anchor alignleft aligncenter alignright alignjustify outdent indent bullist numlist blockquote subscript superscript removeformat styleselect formatselect fontselect fontsizeselect ' +
        'table upload image axupimgs media emoticons charmap hr pagebreak insertdatetime ' +
        'codesample selectall visualblocks searchreplace code print preview indent2em fullscreen'
    ]
  }
})

const aipKey: string = 's1ntkmnev0ggx0hhaqnubrdxhv0ly99uyrdbckeaycx7iz6v'
const uploaded = (blobInfo: any, progress: any) =>
  new Promise((resolve, reject) => {
    if (blobInfo.blob().size / 1024 / 1024 > 10) {
      Message.error('上传失败，图片大小请控制在 10M 以内')
    } else {
      const params = new FormData()
      params.append('image', blobInfo.blob())
      Http.post(env('VITE_BASE_URL') + 'upload/image', params)
        .then(res => {
          if (res.data.code === 10000) {
            resolve(res.data.data.path)
          } else {
            Message.error(res.data.message)
          }
        })
        .catch(() => {
          Message.error('Server Error!')
        })
    }
  })

const multiAttach = ref(true)
const uploadButtonClassWhenFullscreen: string = 'fixed right-2 top-2 z-[999999]'
const uploadButtonClassWhenNotFullscreen: string = 'absolute right-2 top-2 z-[999999]'
const uploadButtonClass = ref<string>(uploadButtonClassWhenNotFullscreen)
const tinymce = ref()
const attachments = ref<Array<string>>([])
const config = {
  base_url: '@/public/tinymce',
  language: props.language,
  placeholder: props.placeholder,
  width: props.width,
  height: props.height,
  plugins: props.plugins,
  toolbar: props.toolbar,
  branding: false,
  // menubar: false,
  images_upload_handler: uploaded,
  setup(editor: any) {
    tinymce.value = editor
    editor.on('FullscreenStateChanged', (e: any) => {
      // _this.fullscreen = e.state
      uploadButtonClass.value = e.state ? uploadButtonClassWhenFullscreen : uploadButtonClassWhenNotFullscreen
    })
  },
  // pick file callback 选择文件
  file_picker_callback: function (callback: any, value: any, meta: any) {
    const input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('accept', meta.filetype === 'media' ? 'video/*' : 'image/*')
    input.addEventListener('change', event => {
      const reader = new FileReader()
      const fileInput = event.target as HTMLInputElement
      if (fileInput.files && fileInput.files.length > 0) {
        const file = fileInput.files[0]
        reader.onload = function () {
          // 构造表单数据
          const formData = new FormData()
          formData.append('file', file)

          Http.post('/upload/file', formData)
            .then(r => {
              callback(r.data.data.path)
            })
            .catch(e => {
              console.error('上传视频报错', e)
            })
        }
        reader.readAsDataURL(file)
      }
    })
    input.click()
  }
}
const content = defineModel()
// 创建的时候
watch(
  () => content.value,
  value => {
    content.value = value
  }
)

// 关闭
const closeDialog = () => {
  let html = ''
  attachments.value.forEach(attachment => {
    if (IMAGE_EXTENSIONS.indexOf(getFileExt(attachment)) > -1) {
      html += `<img src="${attachment}"/>`
    } else {
      const filename = getFilename(attachment)
      html += `<p><a href="${attachment}">${filename}</a></p> `
    }
  })
  tinymce.value.insertContent(html)
  attachments.value = []
  attachVisible.value = false
}

// 开启
const openDialog = () => {
  attachVisible.value = true
}
</script>

<style scoped>
.tinymce-boxz > textarea {
  display: none;
}
</style>
<style>
/* 隐藏apikey没有绑定这个域名的提示 */
.tox-notifications-container .tox-notification--warning {
  display: none !important;
}

.tox {
  z-index: 99 !important;
}

.tox-promotion {
  display: none !important;
}
</style>
